import React from 'react';
import { Button, message } from 'antd';
import { UserOutlined, WechatOutlined, DingtalkOutlined, GlobalOutlined, RightOutlined } from '@ant-design/icons';
import './Login.css';
import { useNavigate } from 'react-router-dom';
interface LoginType {
    key: string;
    name: string;
    icon: React.ReactNode;
    onClick: () => void;
}

interface LoginProps {
    ssoLoginUrl?: string;
    otherLoginTypes?: LoginType[];
    onRegisterClick?: () => void;
}

const Login: React.FC<LoginProps> = ({ ssoLoginUrl, otherLoginTypes, onRegisterClick }) => {
    const navigate = useNavigate();

    const handleUnifiedLogin = () => {
        message.info('跳转到统一身份认证页面');
        // 实际应用中，这里应该跳转到统一身份认证系统
        // navigate('/demo');
        window.location.href = ssoLoginUrl || '/demo';
    };

    const handleRegister = () => {
        // navigate('/register');
        if (onRegisterClick) {
            onRegisterClick();
        }
    };

    return (
        <>
            <div className="login-header">
                <h1 className="login-title">登录</h1>
                <p className="login-welcome">欢迎登录！我们将全力为您提供贴心服务</p>
            </div>

            <div className="login-content">
                {/* 统一身份认证登录按钮 */}
                <div
                    className="unified-login-btn"
                    onClick={handleUnifiedLogin}
                >
                    <UserOutlined style={{ marginRight: 25 }} />
                    <div style={{ flex: 1 }} >统一身份认证登录</div>
                    <RightOutlined className="login-arrow" />
                </div>

                {/* 其他登录方式 */}
                <div className="other-login">
                    <div className="login-divider">其他登录方式</div>
                    <div className="login-options">
                        {otherLoginTypes?.map((item) => (
                            <div key={item.key}>
                                <Button
                                    type="default"
                                    className="login-option"
                                    icon={item.icon}
                                    onClick={item.onClick}
                                    shape="circle"
                                >
                                </Button>
                                <div>{item.name}</div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            {/* 注册链接和忘记密码链接 */}
            <div className="login-footer">
                <div className="register-link">
                    还没有账户？
                    <span onClick={handleRegister} className="register-text">
                        立即注册
                    </span></div>
            </div>
        </>
    );
};

export default Login;